<template>
  <div class="Bg mt-6">
    <div class="bg_title flex justify-between items-center">
      <div class="flex items-center">
        <span :class="[headerList[type][0], 'icon']"></span>
        <span class="text-xl text-white ml-1">{{ headerList[type][1] }}</span>
      </div>
      <div class="flex items-center">
        <span class="text-xl text-white">正常</span>
        <svg aria-hidden="true" class="w-6 h-6 ml-2">
          <use xlink:href="#icon-hr"/>
        </svg>
      </div>
    </div>
    <div :id="id" class="echartsId mt-7 ml-2"></div>
    <!-- <div :id="id" class="echartsId mt-7 ml-2" v-if="type !== 3"></div> -->
    <!-- <scroll-board class="echartsId mt-7 ml-4" :config="props.option" v-else /> -->
  </div>
</template>

<script setup lang="ts">
import {nextTick, getCurrentInstance, watch, reactive} from 'vue'
// // import { getImageUrl } from '@/utils'
import {ECharts} from 'echarts'
// import { ScrollBoard } from '@kjgl77/datav-vue3'
const {proxy} = getCurrentInstance() as any
const echarts = proxy.$echarts

const headerList = reactive([
  ['purple', '心率波动图'],
  ['green', '呼吸波动图'],
  ['pink', '血氧波动图'],
  ['blue', '血压波动图']
])

type EChartsOption = echarts.EChartsOption

interface ReportOption {
  type: number
  id: string
  option: EChartsOption
}

const props = defineProps<ReportOption>()

let myChart: any = null

watch(
  () => props.option,
  () => {
    myChart.clear()
    myChart.setOption(props.option)
  },
  {deep: true}
)

//初始化echarts
const initEchatrs = () => {
  const chartDom = document.getElementById(props.id)
  myChart = echarts.init(chartDom) as ECharts
  props.option && myChart.setOption(props.option)
  //跟随屏幕大小的变化改变图表的大小
  window.addEventListener('resize', () => {
    myChart.resize({})
  })
  //   myChart.on('click', (params: any) => {
  //     myChartClick(params)
  //   })
}

nextTick(() => {
  // if (props.type !== 3) {
  //   initEchatrs()
  // }
  initEchatrs()
})

// const config = reactive({
//   header: ['序号', '采集时间支', '值/mmHg'],
//   data: [
//     ['1', '2022-01-21 11:28', '90/120'],
//     ['2', '2022-01-21 11:28', '90/120'],
//     ['3', '2022-01-21 11:28', '90/120'],
//     ['4', '2022-01-21 11:28', '90/120'],
//     ['5', '2022-01-21 11:28', '90/120'],
//     ['6', '2022-01-21 11:28', '90/120']
//   ],
//   rowNum: 5, //表格行数
//   headerHeight: 46,
//   headerBGC: 'rgba(255, 255, 255, 0.08);', //表头
//   oddRowBGC: 'none', //奇数行
//   evenRowBGC: 'none', //偶数行
//   columnWidth: [50],
//   align: ['center']
// })
</script>

<style scoped lang="less">
.echartsId {
  width: 370px;
  height: 323px;
}

.Bg {
  width: 400px;
  height: 415px;
  background-image: url(@/assets/imgs/hr_bg.png);
  background-size: cover;
  background-position: center center;

  .bg_title {
    width: 100%;
    height: 50px;
    padding: 15px 10px 0px 10px;

    .icon {
      width: 4px;
      height: 22px;
      border-radius: 0px 2px 2px 0px;
      display: inline-block;
    }

    .purple {
      background: #722ed1;
    }

    .blue {
      background: #165dff;
    }

    .green {
      background: #00b42a;
    }

    .pink {
      background: #f5319d;
    }
  }
}
</style>
